<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 1. 链接 -->
            <router-link :to="{name:'aaa'}">首页</router-link>
            <router-link to="/music">音乐</router-link>
            <router-link to="/tech">教育</router-link>
        </ul>
        <!-- 2 容器 -->
        <router-view></router-view>
    </div>

    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        // 3 定义组件
        var Home = {
            template: `<div>首页组件</div>
            `
        };
        var Music = {
            template: `<div>音乐组件</div>`
        };
        var Tech = {
            template: `<div>教育组件</div>`
        };

        // 4 实例化router
        var router = new VueRouter({
            // 5 配置路由
            routes: [
                // path:标识,component:组件
                {
                    name: 'aaa',
                    path: '/home',
                    component: Home
                }, {
                    path: '/music',
                    component: Music
                }, {
                    path: '/tech',
                    component: Tech
                },
            ]
        });

        // 6 把router挂载到Vue选项上
        new Vue({
            el: '#app',
            // router: router
            // ES6中新语法: 当key和value名字一样时 ,可以只写一个单词key
            router
        });

        // 1. 在视图中 router-link设置导航链接 to="/标识"
        // 注意: router-link默认渲染的是a标签
        // 2. 在视图中 router-view设置要渲染的组件的容器
        // 3. 在js中 定义要显示的组件 aCom
        // 4. 在js中 实例化newVueRouter 获取对象router
        // 5. 在js中 配置路由 new VueRouter({routes:[{path:'标识',component:要显示的组件},{},{}]})
        // 6. 在newVue({})中 通过选项router挂载路由
    </script>
</body>

</html>